<template>
  <view>
    <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular="true">
      <swiper-item v-for="(item,index) in news_list.slice(0,4)" :key="index">
        <view class="img_container">
          <image :src="item.news_pics_set[0]" mode="scaleToFill" @click="gotoWebView(item.content)"></image>
        </view>
        <view class="swiper-item">{{item.title}}</view>
      </swiper-item>
    </swiper>
    <view class="list_container">
      <view class="list_item" v-for="(item,index) in news_list" :key="index" @click="gotoWebView(item.content)">
        <view class="left">
          <view class="title">
            {{item.title}}
          </view>
          <view class="bottom">
            <view class="time">
              {{item.create_time.slice(0,10)}}
            </view>
            <view class="writer">
              {{item.author.nickname.slice(0,20)}}
            </view>
          </view>
        </view>
        <image class="img" :src="item.news_pics_set[0]">
        </image>

      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: "my_recommend",
    data() {
      return {
        swiper_list: [],
        news_list: []
      };
    },
    methods: {
      gotoWebView(url) {
        //const url = 'https://mp.weixin.qq.com/s/5-52wJCImOKPU86MBspHGg'; // 跳转的外链
        //const navtitle = '中国海洋大学新闻中心'; // 这个标题是你自己可以设置的
        wx.navigateTo({
          // 跳转到webview页面
          url: `/pages/webview/webview?url=${url}`,
        });
      },
      async getNewsList() {
        // 3.1 发起请求
        const {
          data: res
        } = await uni.$http.get('/news/recommend/v4')
        // 3.2 请求失败
        if (res.code !== 1000) {
          return uni.showToast({
            title: '数据请求失败！',
            duration: 1500,
            icon: 'none',
          })
        }
        // 3.3 请求成功，为 data 中的数据赋值
        console.log(res.data);
        this.news_list = res.data.news
      },
    },
    created() {
      this.getNewsList()
    }
  }
</script>

<style lang="scss">
  .bottom {
    width: 100%;
    display: flex;
    font-size: 13px;
    color: rgba(174, 174, 178, 100);

    .writer {
      margin-left: 10px;
    }
  }

  .title {
    margin-top: 10px;
    font-size: 15px;
    width: 85%;
  }

  .img_container {
    height: 75%;

    image {
      height: 100%;
      width: 100%;
    }
  }

  .swiper-item {
    height: 25%;
    padding-left: 20rpx;
    font-size: 16px;
    padding-top: 5px;
    font-weight: 550;
  }

  .list_item {
    margin-bottom: 10px;
    display: flex;
    padding-left: 36rpx;
    padding-right: 36rpx;
    height: 89px;
    justify-content: space-between;
    border-radius: 8px;

    .img {
      width: 102px;
      height: 57.1144px;
    }

    align-items: center;
    background-color: #fff;

  }

  .left {
    width: 500rpx;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-around;
    align-items: flex-start;
  }

  swiper {
    height: 226px !important;
  }
</style>
